<template>
	<div>
		<view class="top-bar clearfix">
			<view class="top-lang" @click="show = true">
				<image :src="language[langCur].icon" mode="" class="icon"></image>
				<view class="top-lang-select">
					<view class="top-lang-text">{{language[langCur].tit}}</view>
					<view class="top-lang-arrow">
						<u-icon name="arrow-down" color="#fff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<div class="infos">
			<u-button type="primary" class="custom-style">{{$t('item')}}</u-button>
		</div>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="center" :round="20">
			<view class="lang-boxy">
				<view class="lang-row" v-for="(item,index) in language" @tap="setLanguage(index,item)" :key="index">
					<image :src="item.icon" mode=""></image><text>{{item.tit}}</text>
					<view v-if="index == langCur" class="rt">
						<u-icon name="checkbox-mark" color="#a63030"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				langCur: 0,
				show: false,
				// en-us 英文
				// zh-cn 中文
				language: [{
						tit: '中文',
						flag: 'zh-cn',
						icon: '/static/chinese.png',
					},
					{
						tit: 'NZ',
						flag: 'en-us',
						icon: '/static/englist.png',
					}
				],
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {
			this.getLanguage()
		},
		methods: {
			getLanguage() {
				var that = this;
				let lang = uni.getStorageSync('lang')
				if (lang == 'en-us') {
					this.langCur = 1
				} else {
					this.langCur = 0
				}
			},
			setLanguage(index, item) {
				uni.setLocale(item.flag);
				uni.setStorageSync('lang', item.flag)
				this.$i18n.locale = item.flag;
				this.langCur = index
				this.show = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.top-bar {
		position: relative;
		margin-bottom: 20rpx;


		.top-lang {
			background-color: rgba(214, 56, 10, 0.5);
			border-radius: 28rpx;
			padding: 10rpx 14rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-items: center;
			float: right;
			margin-right: 30rpx;
			width: 140rpx;

			.icon {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}

			.top-lang-select {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;

				.top-lang-text {
					font-size: 24rpx;
					color: #fff;
					padding-right: 5rpx;
					line-height: 34rpx;
				}

				.top-lang-arrow {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					flex-direction: row;

					.iconfont {
						font-size: 24rpx;
						color: #fff;
						display: block;
					}
				}
			}
		}

		.top-bar-info {
			.user-flex {
				display: flex;
				align-items: center;

				.name {
					font-size: 32rpx;
					color: #ffffff;
					margin-right: 12rpx;
				}

				.user-info {
					font-size: 24rpx;
					padding: 0 20rpx;
					line-height: 54rpx;
					color: #fff;
					background-color: #ff9000;
					border-radius: 28rpx;
				}
			}

			.user-id {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.lang-row {
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}

		.rt {
			margin-left: auto;
		}

		&:first-child {
			border-bottom: 1px solid #EEEEEE;
		}
	}

	.infos {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		width: 690rpx;
		padding-top: 400rpx;
		margin: 0 auto;
	}
</style>
